<template>
  <div class="sub-out border_style">
    <div class="search text_01">
      共{{page.allTotal||0}}条
      <div class="open-btn">
        <YsButton class="right-between" @click="openModal">新增</YsButton>
      </div>
    </div>

    <proTable class="table-merge" :hasPagination="false" :loading="page.tableLoad" :columns="page.columns"
      :data="page.data" @clickPage="onClickPage" :current="pege_param.start_recd" :total="page.allTotal"
      :pageSize="pege_param.limit_recd">
    </proTable>
    <pro-dialog class="setdialog" ref="addttxgz" width="628" :nopadding="true" title="新增条形缺陷规则">
      <div style="padding: 32px 50px 32px 40px">
        <YsForm ref="yuanxingform" :model="stripFlawInfo" :label-width="130" :rules="app_rule">
          <YsRow :gutter="16">
            <YsCol span="24">
              <YsFormItem label="缺陷等级" prop="flaw_level">
                <Select class="select-border" size="large" v-model="stripFlawInfo.flaw_level">
                  <Option v-for="(item, index) in grade" :value="item.val" :key="index">{{ item.name }}</Option>
                </Select>
              </YsFormItem>
            </YsCol>
          </YsRow>
          <YsRow :gutter="16">
            <YsCol span="24">
              <YsFormItem label="备注">
                <YsInput size="large" type="textarea" maxlength="200" placeholder="最长可输入200字符" class="hg100"
                  v-model="stripFlawInfo.remark"></YsInput>
              </YsFormItem>
            </YsCol>
          </YsRow>
          <!--  -->
          <div class="title-h2">单个条形缺陷最大长度</div>
          <YsRow :gutter="2">
            <YsCol span="18">
              <YsFormItem label="允许值1" prop="odd_allow_val1">
                <YsInput size="large" type="number" :maxlength="20" v-model.number="stripFlawInfo.odd_allow_val1">
                </YsInput>
              </YsFormItem>
            </YsCol>
            <YsCol span="6">
              <YsFormItem class="right-select">
                <Select class="select-border" size="large" disabled v-model="fixed01">
                  <Option v-for="(item, index) in condition" :value="item.val" :key="index">{{ item.name }}</Option>
                </Select>
              </YsFormItem>
            </YsCol>
          </YsRow>
          <YsRow :gutter="16">
            <YsCol span="24">
              <YsFormItem label="类型" prop="odd_val1_type1">
                <Select class="select-border" size="large" v-model="stripFlawInfo.odd_val1_type1">
                  <Option v-for="(item, index) in singleType" :value="item.val" :key="index">{{ item.name }}</Option>
                </Select>
              </YsFormItem>
            </YsCol>
          </YsRow>

          <YsRow :gutter="16">
            <YsCol span="24">
              <YsFormItem label="最小可为">
                <YsInput size="large" type="number" :maxlength="20" v-model.number="stripFlawInfo.odd_min_val">
                </YsInput>
              </YsFormItem>
            </YsCol>
          </YsRow>

          <YsRow :gutter="2">
            <YsCol span="18">
              <YsFormItem label="允许值2" prop="odd_allow_val2">
                <YsInput size="large" type="number" :maxlength="20" v-model.number="stripFlawInfo.odd_allow_val2">
                </YsInput>
              </YsFormItem>
            </YsCol>
            <YsCol span="6">
              <YsFormItem class="right-select">
                <Select class="select-border" size="large" v-model="fixed01" disabled>
                  <Option v-for="(item, index) in condition" :value="item.val" :key="index">{{ item.name }}</Option>
                </Select>
              </YsFormItem>
            </YsCol>
          </YsRow>

          <YsRow :gutter="16">
            <YsCol span="24">
              <YsFormItem label="类型" prop="odd_val2_type">
                <Select class="select-border" size="large" v-model="stripFlawInfo.odd_val2_type">
                  <Option v-for="(item, index) in singleType" :value="item.val" :key="index">{{ item.name }}</Option>
                </Select>
              </YsFormItem>
            </YsCol>
          </YsRow>
          <div class="title-h2">
            一组条形缺陷累计最大长度
          </div>
          <YsRow :gutter="16">
            <YsCol span="24">
              <YsFormItem label="组评定区长">
                <YsInput size="large" type="number" v-model.number="stripFlawInfo.group_area_lenght"></YsInput>
              </YsFormItem>
            </YsCol>
          </YsRow>
          <YsRow :gutter="16">
            <YsCol span="24">
              <YsFormItem label="组评定区宽">
                <YsInput size="large" type="number" v-model.number="stripFlawInfo.group_area_width"></YsInput>
              </YsFormItem>
            </YsCol>
          </YsRow>
          <YsRow :gutter="2">
            <YsCol span="18">
              <YsFormItem label="允许值1" prop="group_allow_val">
                <YsInput size="large" type="number" :maxlength="20" v-model.number="stripFlawInfo.group_allow_val">
                </YsInput>
              </YsFormItem>
            </YsCol>
            <YsCol span="6">
              <YsFormItem class="right-select">
                <Select class="select-border" size="large" disabled v-model="fixed01">
                  <Option v-for="(item, index) in condition" :value="item.val" :key="index">{{ item.name }}</Option>
                </Select>
              </YsFormItem>
            </YsCol>
          </YsRow>

          <YsRow :gutter="16">
            <YsCol span="24">
              <YsFormItem label="类型" prop="group_val_type">
                <Select class="select-border" size="large" v-model="stripFlawInfo.group_val_type">
                  <Option v-for="(item, index) in singleType" :value="item.val" :key="index">{{ item.name }}</Option>
                </Select>
              </YsFormItem>
            </YsCol>
          </YsRow>
          <YsRow :gutter="16">
            <YsCol span="24">
              <YsFormItem label="最小可为">
                <YsInput size="large" type="number" :maxlength="20" v-model.number="stripFlawInfo.group_min_val">
                </YsInput>
              </YsFormItem>
            </YsCol>
          </YsRow>
        </YsForm>
        <YsRow class="foot-btn" style="margin-top: 10px">
          <YsButton @click="handleCancel()" size="large">关闭</YsButton>
          <YsButton @click="handleOk('yuanxingform')" :disabled="btnDisabled" size="large" type="primary">确定</YsButton>
        </YsRow>
      </div>
    </pro-dialog>
  </div>
</template>


<script>
import { mapActions, mapState, mapGetters } from "vuex";

export default {
  name: "BuYunXuQueXian",
  computed: {
    ...mapGetters(['getTableRow']) //获取选中行后新增的数据
  },
  data() {
    return {
      fixed01: 2,
      btnDisabled:false,
      ruleState: null,
      condition: [{ name: "<", val: 1 }, { name: "≤", val: 2 }],
      singleType: [{ name: "数值", val: 1 }, { name: "母材公称厚度(壁厚)", val: 2 }],
      grade: [
        { name: 'Ⅰ级', val: 1 },
        { name: 'Ⅱ级', val: 2 },
        { name: 'Ⅲ级', val: 3 },
        { name: 'Ⅳ级', val: 4 },
      ],
      app_rule: {
        flaw_level: [
          { required: true, type: 'number', message: "请选择缺陷等级", trigger: "change" },
        ],
        odd_allow_val1: [
          { required: true, type: 'number', message: "允许值1不能为空", trigger: "blur" },
        ],
        odd_val1_type1: [
          { required: true, type: 'number', message: "请选择类型", trigger: "change" },
        ],
        odd_allow_val2: [
          { required: true, type: 'number', message: "允许值2不能为空", trigger: "blur" },
        ],
        odd_val2_type: [
          { required: true, type: 'number', message: "请选择类型", trigger: "change" },
        ],
        group_allow_val: [
          { required: true, type: 'number', message: "允许值不能为空", trigger: "blur" },
        ],
        group_val_type: [
          { required: true, type: 'number', message: "请选择类型", trigger: "change" },
        ],
      },
      flawTypeflag: true,
      tableList: {},
      tableListIndex: 0,
      pege_param: {
        rule_id: "",
        start_recd: 1, //开始数据
        limit_recd: 14, //查询的条数
      },
      stripFlawInfo: { //新增和编辑参数
        rule_id: null,   //规则ID
        flaw_level: null,  //缺陷等级
        odd_allow_val1: null,  //单个允许值1
        odd_val1_type1: null, //单个允许值1类型：1-数值，2-壁厚
        odd_min_val: null, //单个最小可为
        odd_allow_val2: null,  //单个允许值2
        odd_val2_type: null,  //单个允许值2类型：1-数值，2-壁厚
        group_area_lenght: null, //组评定区长
        group_area_width: null, //组评定区宽
        group_allow_val: null,  //组允许值
        group_val_type: null, //组允许值类型：1-数值，2-壁厚
        group_min_val: null, //组最小可为
        remark: null,  //备注
      },//条形新增
      page: {
        subscribeState: 0,
        tableLoad: false,
        allTotal: 0,
        columns: [
          {
            title: "顺序号",
            width: 80,
            render: (h, params) => {
              return h('span', params.index + 1)
            }
            // render: (h, params) => {
            //   return h(
            //     "span",
            //     params.index + (this.pege_param.start_recd - 1) * this.pege_param.limit_recd + 1
            //   );
            // },
          },
          {
            title: '级别',
            align: 'center',
            minWidth: 70,
            tooltip: true,
            key: 'flaw_level',
            render: (h, params) => {
              if (params.row.flaw_level == '1') {
                return h('span', {}, 'Ⅰ级')
              }
              if (params.row.flaw_level == '2') {
                return h('span', {}, 'Ⅱ级')
              }
              if (params.row.flaw_level == '3') {
                return h('span', {}, 'Ⅲ级')
              }
              if (params.row.flaw_level == '4') {
                return h('span', {}, 'Ⅳ级')
              }
            }
          },
          {
            title: '单个条形缺陷最大长度（mm）',
            className: "row01",
            align: 'center',
            children: [
              {
                title: '允许值1',
                align: 'center',
                tooltip: true,
                minWidth: 90,
                key: 'odd_allow_val1',
                render: (h, params) => {
                  return h('span', `≤ ${params.row.odd_allow_val1}`)
                }
              },
              {
                title: '类型',
                minWidth: 70,
                tooltip: true,
                align: 'center',

                key: 'odd_val1_type1',
                render: (h, params) => {
                  if (params.row.odd_val1_type1 == '1') {
                    return h('Tooltip', {
                      props: {
                        placement: 'bottom'
                      }
                    }, [

                      h('div', { class: 'text-overflow text20' }, '数值'),
                      h('span', { slot: 'content', style: { whiteSpace: 'normal', wordBreak: 'break-all' } }, '数值')
                    ])
                  }
                  if (params.row.odd_val1_type1 == '2') {
                    return h('Tooltip', {
                      props: {
                        placement: 'bottom'
                      }
                    }, [
                      h('div', { class: 'text-overflow text20' }, '母材公称厚度(壁厚)'),
                      h('span', { slot: 'content', style: { whiteSpace: 'normal', wordBreak: 'break-all' } }, '母材公称厚度(壁厚)')
                    ])
                  }
                }
              },
              {
                title: '最小可为',
                minWidth: 100,
                tooltip: true,
                align: 'center',
                key: 'odd_min_val',

              },
              {
                title: '允许值2',
                align: 'center',
                minWidth: 90,
                tooltip: true,
                key: 'odd_allow_val2',
                render: (h, params) => {
                  return h('span', `≤ ${params.row.odd_allow_val2}`)
                }
              },
              {
                title: '类型',
                minWidth: 70,
                align: 'center',
                tooltip: true,
                key: 'odd_val2_type',
                render: (h, params) => {
                  if (params.row.odd_val2_type == '1') {
                    return h('Tooltip', {
                      props: {
                        placement: 'bottom'
                      }
                    }, [

                      h('div', { class: 'text-overflow text20' }, '数值'),
                      h('span', { slot: 'content', style: { whiteSpace: 'normal', wordBreak: 'break-all' } }, '数值')
                    ])
                  }
                  if (params.row.odd_val2_type == '2') {
                    return h('Tooltip', {
                      props: {
                        placement: 'bottom'
                      }
                    }, [
                      h('div', { class: 'text-overflow text20' }, '母材公称厚度(壁厚)'),
                      h('span', { slot: 'content', style: { whiteSpace: 'normal', wordBreak: 'break-all' } }, '母材公称厚度(壁厚)')
                    ])
                  }
                }
              }
            ]
          },
          {
            title: '一组条形缺陷累计最大长度',
            className: "row02",
            align: 'center',
            children: [
              {
                title: '评定区长度',
                minWidth: 110,
                tooltip: true,
                align: 'center',
                key: 'group_area_lenght',
              },
              {
                title: '允许值',
                align: 'center',
                minWidth: 80,
                key: 'group_allow_val',
                render: (h, params) => {
                  return h('span', `≤ ${params.row.group_allow_val}`)
                }
              },
              {
                title: '类型',
                minWidth: 70,
                tooltip: true,
                align: 'center',
                key: 'group_val_type',
                render: (h, params) => {
                  if (params.row.group_val_type == '1') {
                    return h('Tooltip', {
                      props: {
                        placement: 'bottom'
                      }
                    }, [

                      h('div', { class: 'text-overflow text20' }, '数值'),
                      h('span', { slot: 'content', style: { whiteSpace: 'normal', wordBreak: 'break-all' } }, '数值')
                    ])
                  }
                  if (params.row.group_val_type == '2') {
                    return h('Tooltip', {
                      props: {
                        placement: 'bottom'
                      }
                    }, [
                      h('div', { class: 'text-overflow text20' }, '母材公称厚度(壁厚)'),
                      h('span', { slot: 'content', style: { whiteSpace: 'normal', wordBreak: 'break-all' } }, '母材公称厚度(壁厚)')
                    ])
                  }
                }
              },
              {
                title: '最小可为',
                minWidth: 100,
                tooltip: true,
                align: 'center',
                key: 'group_min_val',
              }
            ]
          },
          {
            title: '备注',
            align: 'center',
            key: 'remark',
            tooltip: true,
            width: 70,
          },
          {
            title: "操作",
            width: 150,
            tooltip: true,
            // align: "center",
            render: (h, params) => {
              return h(
                "div",
                {
                  attrs: { class: "mouse-on" },
                },
                [
                  h("span", {
                    domProps: {
                      innerText: "修改",
                    },
                    style: {
                      margin: "0  6px 0 0",
                      display: this.ruleState == 0 ? "inline-block" : "none",
                    },
                    class: "textColor",
                    on: {
                      click: (event) => {
                        this.exitTiaoXingTableItem(params.row);
                        event.stopPropagation();
                      },
                    },
                  }),
                  h("span", {
                    domProps: {
                      innerText: "删除",
                    },
                    style: {

                      display: this.ruleState == 0 ? "inline-block" : "none",
                    },
                    class: "textColor",
                    on: {
                      click: (event) => {
                        this.handleDlelteItem(params.row);
                        event.stopPropagation();
                      },
                    },
                  }),

                ]
              );
            },
          },
        ],
        data: [],
      },
    };
  },
  watch: {
    getTableRow(v) {
      if (v) {
        this.page.data = []
        this.pege_param.rule_id = v.id
        this.ruleState = v.rule_state
        this.pege_param.start_recd = 1
        setTimeout(() => {
          document.getElementsByClassName('ivu-table-body')[2].scrollTop = `${0}px`
        }, 500);

        this.getTiaoXingTable();
      }
    }
  },
  mounted() {

    document.getElementsByClassName('ivu-table-body')[2].addEventListener('scroll', this.myScroll);
  },
  methods: {
    ...mapActions(["setStripFlawAdd", "setStripFlawEdit", "setStripFlawDel", "setStripFlawList"]),
    //滚动条滚动
    myScroll() {
      let scrollTop = document.getElementsByClassName('ivu-table-body')[2].scrollTop;
      let clientHeight = document.getElementsByClassName('ivu-table-body')[2].clientHeight;
      let scrollHeight = document.getElementsByClassName('ivu-table-body')[2].scrollHeight;
      if (Math.ceil(scrollTop + clientHeight) >= scrollHeight) {//判断滚动条是否滚动到底部
        setTimeout(() => {
          if (this.page.allTotal == this.page.data.length) return
          this.pege_param.start_recd = this.pege_param.start_recd + 1;
          this.getTiaoXingTable()
        }, 500);

      }
    },
    //获取服务列表
    getTiaoXingTable() {
      let _this = this;
      this.page.tableLoad = true;
      _this.setStripFlawList(this.pege_param).then((res) => {
        let { data, msg, scode, status } = res;
        _this.page.tableLoad = false;
        if (status === "ok") {
          const old_data = JSON.parse(JSON.stringify(this.page.data))
          this.page.data = old_data.concat(data.stripFlawInfos);
          this.page.allTotal = data.all_recd;
        } else {
          _this.$YsMessage.error(msg);
          this.page.data = [];
          this.page.allTotal = 0;
        }
      }).catch((err) => {
        _this.page.tableLoad = false;
        _this.$YsMessage.error("获取数据失败");
      });
    },
    //分页
    onClickPage(pageNum) {
      this.pege_param.start_recd = pageNum;
      this.getTiaoXingTable();
    },
    //打开模态框
    openModal() {
      this.$refs.yuanxingform.resetFields()
      this.stripFlawInfo = this.$options.data().stripFlawInfo
      if (this.pege_param.rule_id) {
        this.$refs.addttxgz.show()
      } else {
        this.$YsMessage.info("请选择规则ID");
      }
    },
    //确定
    handleOk(name) {
      this.$refs[name].validate((valid) => {
        if (valid) {
          if (this.flawTypeflag) {
            this.addtiaoxingItem()
          } else {
            this.editTiaoxingItem()
          }
        }
      });
    },
    //条形新增
    addtiaoxingItem() {
      let _this = this
      this.stripFlawInfo.rule_id = this.pege_param.rule_id
      this.btnDisabled = true
      _this.setStripFlawAdd({ stripFlawInfo: this.stripFlawInfo }).then((res) => {
        let { data, msg, scode, status } = res;
        setTimeout(function () {
          _this.btnDisabled = false
        }, 500)
        if (status === "ok") {
          _this.$YsMessage.success(data.message_text)
          _this.$refs.addttxgz.close()
          _this.page.data = [];
          _this.page.allTotal = 0;
          _this.getTiaoXingTable()
        } else {
          _this.$YsMessage.error(msg);
        }
      }).catch((err) => {
        this.btnDisabled = false
      });
    },
    //条形编辑
    editTiaoxingItem() {
      let _this = this
      this.stripFlawInfo.rule_id = this.pege_param.rule_id
      this.btnDisabled = true
      _this.setStripFlawEdit({ stripFlawInfo: this.stripFlawInfo }).then((res) => {
        let { data, msg, scode, status } = res;
        this.btnDisabled = false
        if (status === "ok") {
          _this.$YsMessage.success(data.message_text)
          _this.page.data = [];
          _this.page.allTotal = 0;
          _this.$refs.addttxgz.close()
          _this.getTiaoXingTable()
        } else {
          _this.$YsMessage.error(msg);
        }
      }).catch((err) => {
        this.btnDisabled = false
      });
    },
    //删除操作
    handleDlelteItem(item) {
      let _this = this;
      this.$YsModal.confirm({
        title: "删除",
        content: "<p>确认是否删除！</p>",
        onOk: () => {
          _this.setStripFlawDel({ stripFlawInfo: { id: item.id } }).then((res) => {
            let { data, msg, scode, status } = res;
            if (status === "ok") {
              _this.$YsMessage.success("删除成功");
              _this.page.data = [];
              _this.page.allTotal = 0;
              _this.getTiaoXingTable();
            } else {
              _this.$YsMessage.error(msg);
            }
          }).catch((err) => {
            _this.$YsMessage.error("删除失败");
          });
        },
      });
    },

    //编辑弹出
    exitTiaoXingTableItem(item) {
      this.$refs.yuanxingform.resetFields()
      this.flawTypeflag = false
      this.stripFlawInfo = Object.assign({}, item)
      this.$refs.addttxgz.show()
    },
    //取消
    handleCancel() {
      this.$refs.addttxgz.close()
    }
  },

};
</script>
<style lang="less" scoped>
.search {
  display: flex;
  width: 100%;
  align-items: center;
  padding: 16px 22px 8px 10px;

  .open-btn {
    margin-left: auto;
  }
}

/deep/.setAllStyle {
  width: 81px;
  height: 30px;
  line-height: 30px;
  border-radius: 4px;
  text-align: center;
  color: #ffffff;
}

.sub-out {
  height: 100% !important;
  border-radius: 0 0 4px 4px;
}

/deep/ .mouse-on {
  .icon-bianji:hover {
    cursor: pointer;
    color: #0091ff;
  }
}

/deep/ .mouse-on {
  .icon-a-lujing22614:hover {
    cursor: pointer;
    color: #d53939;
  }
}

/deep/ .hg100 {
  textarea {
    height: 100px;
  }
}

/deep/.right-select {
  .ivu-form-item-content {
    margin-left: 0 !important;
  }
}

.title-h2 {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 10px;
}

/deep/ .textColor {
  // color: '#0091FF';
  color: #0091ff;
  margin-right: 8px;
  cursor: pointer;

  &:hover {
    opacity: 0.8;
  }
}

.table-merge {
  height: calc(100% - 64px);

  /deep/ .ivu-table-body {
    height: calc(100% - 117px);
  }
}

/deep/ .text20 {
  width: 80px;
}

.right-between {
  width: 80px;
  min-width: 80px;
  height: 40px;
  background: rgba(255, 255, 255, 0.39);
  border: 1px solid #0061ff;
  opacity: 1;
  border-radius: 4px;
  color: #0091ff;
  font-size: 16px;
  font-family: PingFang SC;
}
</style>
